import React, { useMemo, useState } from 'react'
import { LoopOutline } from 'antd-mobile-icons'
import './index.css'
import { Tabs, Popup, CalendarPickerView } from 'antd-mobile'
import {
  Form,
  Input,
  Button,
  Dialog,
  Checkbox,
  Space,
  DatePicker,
} from 'antd-mobile'
import { useDispatch, useSelector } from 'react-redux'
import { uoLoadSplace, upLoadDate } from '../../store/slice/ticket'
import dayjs from 'dayjs'
import { dateFormat } from '../../utils'
import { useNavigate } from 'react-router-dom'


function Index() {
  let nav = useNavigate()
  const [visible5, setVisible5] = useState(false)
  let discatch = useDispatch()
  const from = useSelector(store => store.ticket.from)
  const to = useSelector(store => store.ticket.to)
  const date = useSelector(store => store.ticket.date)
  const renderBottom = (dt) => {
    const c = Math.ceil(dayjs(dt).diff(dayjs(), 'day', true))
    if (c == 0) {
      return '今天'
    } else if (c == 1) {
      return '明天'
    } else if (c == 2) {
      return '后天'
    }
    return ''
  }
  const dtObj = useMemo(() => dateFormat(date), [date])
  return (
    <div className='aa'>
      <div className="top"></div>
      <div className="top1">
        <div className={["row", 'row1'].join(' ')}>
          <span onClick={() => nav('/citylist?type=from')}>{from}</span>
          <LoopOutline style={{ fontSize: 36, color: '#ccc' }} onClick={() => discatch(uoLoadSplace())} />
          <span onClick={() => nav('/citylist?type=to')}>{to}</span>
        </div>
        <div className={["row", 'row2'].join(' ')} onClick={() => setVisible5(true)}>
          <span>{dtObj.date}</span>
          <span>{dtObj.day}</span><span>{dtObj.info}</span>
          {/* <span className='a1'>周三</span> */}
        </div>
        <div className={["row", 'row3'].join(' ')}>
          <span>经济舱</span>
          <span className='ac'>
            <Checkbox value='1'>带儿童</Checkbox>
            <Checkbox value='2'>带婴儿</Checkbox>
          </span>
        </div>
        <Button block>查询</Button>

        <Popup
          visible={visible5}
          onMaskClick={() => {
            setVisible5(false)
          }}
          bodyStyle={{
            borderTopLeftRadius: '8px',
            borderTopRightRadius: '8px',
            minHeight: '40vh',
          }}
        >
          <CalendarPickerView
            title='选择出发日期'
            min={Date.now()}
            max={Date.now() + 14 * 24 * 60 * 60 * 1000}
            renderTop={false}
            renderBottom={renderBottom}
            value={date}
            onChange={(val) => {
              if (val) {
                discatch(upLoadDate(val ))
              }

              setVisible5(false)
            }}

          />
        </Popup>
      </div>
    </div>
  )
}

export default Index
